<template>
    <div class="orderTable-container">
        <div class="orderTable-container-top" v-if="isFullscreen == true">
            <div class="top-left">
                <div class="top-com" style="margin-right: 80px;">桌台：{{ consumeInfo.roomName }}</div>
                <div class="top-com">人数：{{ consumeInfo.arrivedPeopelCount }}</div>
                <div class="top-com">电话：{{ consumeInfo.memberMobile }}</div>
                <div class="top-com">姓名：{{ consumeInfo.memberName }}</div>
                <div class="top-com" v-if="consumeInfo.consumeSourceType">来源：{{ consumeInfo.consumeSourceType == '营销' ? consumeInfo.maintainUserName :consumeInfo.consumeSourceType  }}</div>
                <div class="top-com">服务员：{{ consumeInfo.waiterName }}</div>
                <div class="top-spe" @click="getUpadTableInfo">修改桌台信息</div>
            </div>
            <div class="top-right" @click="onClose">关闭</div>
        </div>
        <div class="orderTable-container-main">
            <div class="main-left">
                <ul class="main-left-item" :class="{ spe: tableState == 0 }"
                    @click="changeTableState('0', 0, '', totalComsume.payAmt)">
                    <div class="state-icon" style="background: #FF6A00;" v-if="totalComsume.isFinish">已结清</div>
                    <div class="state-icon" v-if="!totalComsume.isFinish">未结清</div>
                    <li class="item-li" v-if="totalComsume.beforeRoomName">
                        <div class="li-title">转台前桌号：</div>
                        <div class="li-value">{{ totalComsume.beforeRoomName }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title" style="color: #FF3333;">低消：</div>
                        <div class="li-value" style="color: #FF3333;">￥{{ totalComsume.minConsume }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">台单号：</div>
                        <div class="li-value">{{ totalComsume.consumeCode }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">开台时间：</div>
                        <div class="li-value">{{ totalComsume.startTime }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">实收金额：</div>
                        <div class="li-value spe" style="color: #FF6A00;font-weight: bold;">￥{{
                            formatNumber(totalComsume.realAmt ) }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">总菜品：</div>
                        <div class="li-value" style="color: #FF6A00;">{{ totalComsume.mainCount }}项{{
                            totalComsume.mainGoodsCount }}份</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">商品金额：</div>
                        <div class="li-value" style="font-weight: 700;">￥{{ totalComsume.totalAmt }}</div>
                    </li>
                    <li class="item-li">
                        <div class="li-title">未付金额：</div>
                        <div class="li-value" style="color: #FF3333;font-weight: bold;">￥{{
                            formatNumber(totalComsume.unPayAmt) }}</div>
                    </li>
                    <div class="fullscreen" @click="isFullscreenChange"> {{ isFullscreen ? '全屏' : '缩小' }}</div>
                </ul>
                <div class="main-left-spe" v-for="(v, k) in payList" :key="k" :class="{ spe: tableActive == k + 1 }"
                    @click="changeTableState(v.processState, k + 1, v.payBatchCode, v.payAmt, v)">
                    <div class="spe-top">
                        <div class="spe-top-left">
                            <span>结账单号：</span>
                            <span class="spe-top-left">{{ v.payBatchCode }}</span>
                        </div>
                        <div class="spe-top-right">{{ v.index }}</div>
                    </div>
                    <ul class="spe-main">
                        <li class="spe-main-li spe">
                            <div class="li-left">
                                <div class="li-title">实收金额：</div>
                                <div class="li-value" style="color: #FF6A00;">￥{{ formatNumber(v.realPayAmt) }}</div>
                            </div>
                            <div class="li-right" :style="{ 'color': v.processState == 1 ? '#FF3333' : '#0ACC6B' }">
                                {{ v.processState == 1 ? '支付中' : '已支付' }}</div>
                        </li>
                        <li class="spe-main-state">({{ v.proMethod }})</li>
                        <li class="spe-main-li" v-if="v.unPayAmt">
                            <div class="li-title">未付金额：</div>
                            <div class="li-value" style="color: #FF3333;">￥{{ formatNumber(v.unPayAmt) }}</div>
                        </li>
                        <li class="spe-main-li">
                            <div class="li-title">结账商品：</div>
                            <div class="li-value" style="color: #FF6A00;">{{ v.payMainCount }}项{{ v.payMainGoodsCount }}份
                            </div>
                        </li>
                        <li class="spe-main-li spe">
                            <div class="li-left">
                                <div class="li-title">商品金额：</div>
                                <div class="li-value" style="color: #212121;">￥{{ formatNumber(v.payAmt) }}</div>
                            </div>
                        </li>
                        <li class="spe-main-li">
                            <div class="li-title">结账时间：</div>
                            <div class="li-value">{{ v.payTime }}</div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="main-right" :class="{ 'main-right-height': !isFullscreen }">
                <div class="main-right-top">
                    <div class="top-left" @click="payStateChange">
                        <div class="top-left-btn" :class="{ active: payState == 0 }" data-type="未结账"
                            v-show="tableState == 0">未结账：￥{{ formatNumber(unPay) }}</div>
                        <div class="top-left-btn" :class="{ active: payState == 1 }" data-type="已结账"
                            v-show="tableState == 0 || tableState == 2">已结账：￥{{ formatNumber(hasPay) }}</div>
                        <div class="top-left-btn" :class="{ active: payState == 2 }" data-type="支付中"
                            v-show="tableState == 0 || tableState == 1">支付中：￥{{ formatNumber(paying) }}</div>
                        <div class="top-left-forAll" data-type="查看全部" v-show="tableState != 0">查看全部</div>
                        <i data-type="查看全部" v-show="tableState != 0"></i>
                    </div>
                    <div class="top-right" v-show="tableState == 0" style="position: relative;right: -16px;">
                        <div v-has-role="'order-giftLog'" class="top-right-btn" @click="reocrdsChange(1)" :class="{ active: recordsState == 1 }">赠送记录
                        </div>
                        <div v-has-role="'order-returnLog'" class="top-right-btn" @click="reocrdsChange(2)" :class="{ active: recordsState == 2 }">退换菜记录
                        </div>
                    </div>
                </div>
                <div class="main-right-nav" @click="onNavChange" v-if="isFullscreen == true"> 
                    <div class="nav-btn" v-for="(v, k) in navBtnList" :key="k" :data-type="v.title" :data-use="v.canNotUse"  v-has-role="v.role"
                        :class="{ active: v.canNotUse || (v.title == '退菜' && returningCon == false) || (v.title == '换菜' && changeCon == false) }">
                        {{ v.title }}
                    </div>
                    <div class="jt-btn-flex jt-btn-flex-1" v-if="hasDlsplay == true">
                        <div class="forceUnLock jt-mr20"  @click="kitchenChaneg('1')">{{pauseText}}</div>
                        <div  class="forceUnLock" @click="kitchenChaneg('2')">催单</div>
                    </div>
                    <div class="jt-btn-flex">
                        <div class="forceUnLock jt-mr20" v-if="liaNtaistatus" @click="LiantaiTableSelectShow = true">联台</div>
                        <div class="forceUnLock jt-mr20" v-else @click="canceltaiChange">取消联台</div>
                        <div v-has-role="'order-unlock-force'" class="forceUnLock" @click="forceUnLock">强制解锁</div>
                    </div>
                </div>
                <div class="main-right-table" v-loading="loadingTable" :class="{ 'main-right-table-height': !isFullscreen,'unpay':payState == 0}" >
                    <!-- <el-table :data="payState == 0 ? tableShowList : tableData1"  header-row-class-name="tableHeaderRowClassName"> -->
                    <el-table :data="tableShowList" :cell-style="cellStyle"   :span-method="objectSpanMethod" header-row-class-name="tableHeaderRowClassName">
                        <el-table-column label="商品名称" min-width="20%" align="center">
                            <template #default="scope">
                                <div class="table-cell">
                                    <div class="table-spe" v-if="scope.row.isPackage" @click="packageInfo(scope.row)"></div>
                                    <span>{{ scope.row.goodsName }}</span>
                                </div>
                                <div v-if="scope.row.flavor">({{ scope.row.flavor }})</div>

                            </template>
                        </el-table-column>
                        <el-table-column prop="orderQty" label="数量（单位）" min-width="8%" align="center">
                            <template #default="scope">{{ scope.row.orderQty }}{{ scope.row.uomName }}</template>
                        </el-table-column>
                        <el-table-column prop="salePrice" label="单价" min-width="10%" align="center">
                            <template #default="scope">{{ formatNumber(scope.row.salePrice) }}</template>
                        </el-table-column>
                        <el-table-column prop="realAmt" label="金额" min-width="10%" align="center">
                            <template #default="scope">{{ formatNumber(scope.row.realAmt) }}</template>
                        </el-table-column>
                        <el-table-column prop="orderUser" label="点单员" min-width="12%" align="center" v-if="isShow1">
                            <template #default="scope">{{ scope.row.orderUser }}({{ scope.row.sourceTypeName }})</template>
                        </el-table-column>
                        <el-table-column prop="orderTime" label="下单时间" min-width="15%" align="center" v-if="isShow2">
                            <template #default="scope">{{ valiTime(scope.row.orderTime) }}</template>
                        </el-table-column>
                        <el-table-column prop="giftUser" label="赠送人" min-width="10%" align="center"
                            v-if="isShow10"></el-table-column>
                        <el-table-column label="赠送时间" min-width="15%" align="center" v-if="isShow11">
                            <template #default="scope">{{ valiTime(scope.row.giftTime) }}</template>
                        </el-table-column>
                        <el-table-column prop="opUser" label="操作人" min-width="10%" align="center"
                            v-if="isShow12"></el-table-column>
                        <el-table-column label="操作时间" min-width="15%" align="center" v-if="isShow13">
                            <template #default="scope">{{ valiTime(scope.row.opDate) }}</template>
                        </el-table-column>
                        <el-table-column prop="payType" label="付款方式" min-width="10%" align="center"
                            v-if="isShow6"></el-table-column>
                        <el-table-column prop="cashUser" label="收银员" min-width="10%" align="center"
                            v-if="isShow7"></el-table-column>
                        <!-- <el-table-column
                            prop="date"
                            label="最后支付时间"
                            min-width="15%"
                            align="center"
                            v-if="isShow9"
                        ></el-table-column> -->
                        <el-table-column prop="state" label="状态" min-width="6%" align="center"
                            v-if="isShow4">
                            <template #default="scope">
                                  <div  class="chy-downcontinar">
                                    <div>{{ scope.row.state }}</div>
                                    <div @click="PrintOrder(scope.row)">出品补打</div>  
                                  </div>
                            </template>
                        </el-table-column>
                         <el-table-column prop="orderBatchCode" label="订单号" min-width="18%" align="center" >
                            <template #default="scope">{{ scope.row.orderBatchCode }}</template>
                        </el-table-column>
                        <el-table-column prop="marketUserName"   class="markUser" v-show="orgCode == '0024' || orgCode == '0025'" label="下单员" min-width="16%" align="center" v-if="isShow1">
                            <template #default="scope">
                                <div class="table-markUser"  @click="doShowMark(scope.row,scope)">
                                    <div class="table-markUser-title" v-show="!changeMarkShow || changeCode != scope.row.orderBatchCode">
                                        {{ scope.row.marketUserName || '无' }}
                                        <!-- {{ filterUserNameMain(scope.row.marketUserName,0) }} -->
                                    </div>
                                    <div class="table-markUser-select" v-show="changeMarkShow && changeCode == scope.row.orderBatchCode">
                                        <el-tree-select
                                            v-show="changeMarkShow"
                                            v-model="selectedValueText"
                                            :data="treeData"
                                            :props="{
                                                label: 'label',
                                                value: 'value',
                                                children: 'children',
                                            }"
                                            class="mark-select"
                                            clearable
                                            placeholder="请选择下单人"
                                            :suffix-icon="IconDropDown"
                                            @change="changeMarketUser"
                                            @blur="changeMarkShow = false"
                                            filterable 
                                        /> 
                                    </div>
                                    
                                    <!-- <div class="table-markUser-desc">
                                        {{ filterUserNameMain(scope.row.marketUserName,1) }}
                                    </div> -->
                                    <div class="table-markUser-btn" v-show="!changeMarkShow || changeCode != scope.row.orderBatchCode">
                                        更改
                                    </div>
                                    
                                    
                                </div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="memberMobile" label="客户信息" min-width="15%" align="center" v-if="isShow5"> </el-table-column> -->
                    </el-table>
                </div>
                <div>
                    <el-dialog v-model="packageInfoShow" :show-close="false" width="80.5%" title="套餐详情"
                        style="border-radius: 10px;" center>
                        <div class="main-right-table spe">
                            <!-- <el-table :data="payState == 0 ? tableShowList : tableData1"  header-row-class-name="tableHeaderRowClassName"> -->
                            <el-table :data="packageList" header-row-class-name="tableHeaderRowClassName">
                                <el-table-column label="商品名称" min-width="33%" align="center">
                                    <template #default="scope">
                                        <div class="table-cell">
                                            <div class="table-spe" v-if="scope.row.isPackage"></div>
                                            <span>{{ scope.row.goodsName }}</span>
                                        </div>
                                        <div class="table-sub" v-for="(item, index) in scope.row.subGoods" :key="index">
                                            <div class="subDot"></div>
                                            <div class="subName">{{ item.goodsName }}（{{ item.orderQty }}*{{ item.uomName }}）{{item.flavor}}
                                            </div>
                                            <div @click="PrintOrder(item,'taocan',scope.row)" class="print-taocan">出品补打</div> 
                                        </div>
                                        <div v-if="scope.row.flavor">({{ scope.row.flavor }})</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="orderQty" label="数量（单位）" min-width="10%" align="center">
                                    <template #default="scope">{{ scope.row.orderQty }}{{ scope.row.uomName }}</template>
                                </el-table-column>
                                <el-table-column prop="salePrice" label="单价" min-width="10%" align="center">
                                    <template #default="scope">{{ formatNumber(scope.row.salePrice) }}</template>
                                </el-table-column>
                                <el-table-column prop="realAmt" label="金额" min-width="10%" align="center">
                                    <template #default="scope">{{ formatNumber(scope.row.realAmt) }}</template>
                                </el-table-column>
                                <el-table-column prop="orderUser" label="点单员" min-width="10%" align="center" v-if="isShow1">
                                    <template #default="scope">{{ scope.row.orderUser }}({{ scope.row.sourceTypeName
                                    }})</template>
                                </el-table-column>
                                <el-table-column prop="orderUser"  v-show="orgCode == '0024' || orgCode == '0025'" label="下单员" min-width="10%" align="center" v-if="isShow1">
                                    <template #default="scope">{{ scope.row.marketUserName }}</template>
                                </el-table-column>
                                <el-table-column prop="orderTime" label="下单时间" min-width="15%" align="center"
                                    v-if="isShow2">
                                    <template #default="scope">{{ valiTime(scope.row.orderTime) }}</template>
                                </el-table-column>
                                <el-table-column prop="giftUser" label="赠送人" min-width="10%" align="center"
                                    v-if="isShow10"></el-table-column>
                                <el-table-column label="赠送时间" min-width="15%" align="center" v-if="isShow11">
                                    <template #default="scope">{{ valiTime(scope.row.giftTime) }}</template>
                                </el-table-column>
                                <el-table-column prop="opUser" label="操作人" min-width="10%" align="center"
                                    v-if="isShow12"></el-table-column>
                                <el-table-column label="操作时间" min-width="15%" align="center" v-if="isShow13">
                                    <template #default="scope">{{ valiTime(scope.row.opDate) }}</template>
                                </el-table-column>
                                <!-- <el-table-column prop="isWakeUp" label="是否叫起" min-width="10%" align="center" v-if="isShow3">
                            <template #default="scope">
                                {{ scope.row.isWakeUp?'是':'否' }}
                            </template>
                        </el-table-column>-->
                                <el-table-column prop="payType" label="付款方式" min-width="10%" align="center"
                                    v-if="isShow6"></el-table-column>
                                <el-table-column prop="cashUser" label="收银员" min-width="10%" align="center"
                                    v-if="isShow7"></el-table-column>
                                <!-- <el-table-column
                            prop="date"
                            label="最后支付时间"
                            min-width="15%"
                            align="center"
                            v-if="isShow9"
                        ></el-table-column> -->
                                <el-table-column prop="state" label="状态" min-width="10%" align="center"
                                    v-if="isShow4"></el-table-column>
                                <!-- <el-table-column prop="memberMobile" label="客户信息" min-width="15%" align="center" v-if="isShow5"> </el-table-column> -->
                            </el-table>
                        </div>
                        <div class="subClose">
                            <div @click="packageInfoShow = false">关闭</div>
                        </div>
                    </el-dialog>
                </div>
                <div class="main-right-footer">
                    <div class="footer-left" v-show="payState == 0">
                        <div>
                            <span class="span-title">未结账金额：</span>
                            <span class="span-value">￥{{ formatNumber(totalComsume.unPayAmt) }}</span>
                        </div>
                        <div style="margin-left: 60px;">
                            <span class="span-title">数量：</span>
                            <span class="span-value" style="color: #FF6A00;">{{ tableShowList.length }}项
                                {{ tableShowListCount }}份</span>
                        </div>
                    </div>
                    <div class="footer-left" v-show="recordsState == 2">
                        <div>
                            <span class="span-title">退换菜总金额：</span>
                            <span class="span-value">￥{{ formatNumber(returnPrice) }}</span>
                        </div>
                        <div style="margin-left: 60px;">
                            <span class="span-title">数量：</span>
                            <span class="span-value" style="color: #FF6A00;">{{ tableShowList.length }}项
                                {{ tableShowListCount }}份</span>
                        </div>
                    </div>
                    <div class="footer-left">
                      
                    </div>
                    <!-- <div style="display: flex;align-items: center;" v-if="isFullscreen == true">
                        <div  v-if="tableShowListCount > 0">  {{tableShowListForm.pageIndex}}/{{ totalPages }} </div>
                            <div class="footer-right" @click="tablePageChange">
                            <div class="footer-right-btn" data-type="up">上一页</div>
                            <div class="footer-right-btn" data-type="down">下一页</div>
                        </div>
                    </div> -->
                </div>
                <div v-if="isFullscreen == true">
                <div class="main-right-pay" v-show="payState != 0 && isShowALLrecord" v-if="payStatistics">
                    <div class="pay-left">
                        <div class="pay-left-top">
                            <div class="left-top-item">
                                <div style="font-weight: bold;">商品金额：</div>
                                <div style="font-weight: bold; color: #FF3333;">￥{{
                                    formatNumber(payStatistics.totalOrderAmt)
                                }}</div>
                            </div>
                            <div class="left-top-item">
                                <div>未支付：</div>
                                <div style="color: #FF3333;">￥{{ formatNumber(payStatistics.unOrderPay) }}</div>
                            </div>
                            <div class="left-top-item">
                                <div>数量：</div>
                                <div style="color: #FF6A00;">{{ payStatistics.mainCount }}项 {{ payStatistics.mainGoodsCount
                                }}份
                                </div>
                            </div>
                        </div>
                        <div class="pay-left-main">
                            <ul class="main-all">
                                <li class="li-item spe">
                                    <div class="all-title">优惠总金额：</div>
                                    <div style="color: #FF3333;">￥{{ formatNumber(payStatistics.disAmtTotal) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="all-title">赠送优惠：</div>
                                    <div>￥{{ formatNumber(disAmt.giftAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="all-title">折扣优惠：</div>
                                    <div>￥{{ formatNumber(disAmt.storeDisAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="all-title">会员优惠：</div>
                                    <div>￥{{ formatNumber(disAmt.vipDisAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="all-title">团购券优惠：</div>
                                    <div>￥{{ formatNumber(disAmt.ticketGroupDisAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="all-title">抹零：</div>
                                    <div>￥{{ formatNumber(disAmt.smallChange) }}</div>
                                </li>
                                <!-- <li class="li-item"><div class="all-title">促销价优惠：</div><div>￥{{formatNumber(disAmt.disAmt)}}</div></li> -->
                            </ul>
                            <ul class="main-other">
                                <li class="li-item spe">
                                    <div class="other-title">其他金额：</div>
                                    <div style="color:#FF6A00">￥{{ formatNumber(payStatistics.otherAmtTotal) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="other-title">服务费：</div>
                                    <div>￥{{ formatNumber(otherAmt.serviceAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="other-title">补低消差额：</div>
                                    <div>￥{{ formatNumber(otherAmt.balanceAmt) }}</div>
                                </li>
                                <li class="li-item">
                                    <div class="other-title">不找赎：</div>
                                    <div>￥{{ formatNumber(otherAmt.notGiveChange) }}</div>
                                </li>
                                <!-- <li class="li-item"><div class="other-title">餐位费：</div><div>￥{{formatNumber(otherAmt.roomAmt)}}</div></li>
                                <li class="li-item"><div class="other-title">包装费：</div><div>￥{{formatNumber(otherAmt.packAmt)}}</div></li>
                                <li class="li-item"><div class="other-title">配送费：</div><div>￥{{formatNumber(otherAmt.tranAmt)}}</div></li>-->
                            </ul>
                            <ul class="main-get">
                                <li class="li-item spe">
                                    <div class="get-title">收款金额：</div>
                                    <div style="color:#0ACC6B">￥{{ formatNumber(payStatistics.collectAmtTotal) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.cashAmt">
                                    <div class="get-title">现金：</div>
                                    <div>￥{{ formatNumber(collectAmt.cashAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.vipTicketAmt">
                                    <div class="get-title">会员优惠券：</div>
                                    <div>￥{{ formatNumber(collectAmt.vipTicketAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.wechatAmt">
                                    <div class="get-title">微信：</div>
                                    <div>￥{{ formatNumber(collectAmt.wechatAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.aliPayAmt">
                                    <div class="get-title">支付宝：</div>
                                    <div>￥{{ formatNumber(collectAmt.aliPayAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.bankAmt">
                                    <div class="get-title">银联支付：</div>
                                    <div>￥{{ formatNumber(collectAmt.bankAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.vipAmt">
                                    <div class="get-title">会员卡本金：</div>
                                    <div>￥{{ formatNumber(collectAmt.vipAmt - (collectAmt.prePayAmt ? collectAmt.prePayAmt : 0)) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.prePayAmt">
                                    <div class="get-title">赠送金额：</div>
                                    <div>￥{{ formatNumber(collectAmt.prePayAmt) }}</div>
                                </li>
                                
                                <li class="li-item" v-if="collectAmt.polymerizationAmt">
                                    <div class="get-title">聚合支付：</div>
                                    <div>￥{{ formatNumber(collectAmt.polymerizationAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.ticketGroupAmt">
                                    <div class="get-title">团购券支付：</div>
                                    <div>￥{{ formatNumber(collectAmt.ticketGroupAmt) }}</div>
                                </li>
                                <li class="li-item" v-if="collectAmt.mountAmt">
                                    <div class="get-title">挂账支付：</div>
                                    <div>￥{{ formatNumber(collectAmt.mountAmt) }}</div>
                                </li>
                                <li class="li-item" v-for="(v, k) in collectAmt.otherAmtSub" :key="k">
                                    <!-- v-if="collectAmt.otherAmt" -->
                                    <div class="get-title">{{ v.subName }} ：</div>
                                    <div>￥{{ formatNumber(v.amt) }}</div>
                                </li>
                            </ul>
                            <ul class="main-change">
                                <li class="li-item spe">
                                    <div>找零：</div>
                                    <div style="color:#FF3333">￥{{ formatNumber(payStatistics.giveChange) }}</div>
                                </li>
                            </ul>
                        </div>
                        <div class="pay-left-footer" v-if="payStatistics.remark">
                            备注:{{ payStatistics.remark }}
                        </div>
                    </div>
                    <div class="pay-right">
                        <div class="pay-right-top">支付记录</div>
                        <div class="pay-right-item" v-for="(v, k) in orderPayList" :key="k">
                            <div class="item-title">
                                <div class="item-title-one">结账单号：{{ v.payBatchCode }}</div>
                                <div class="item-title-two">支付金额</div>
                                <div class="item-title-three">支付方式</div>
                                <div class="item-title-four">支付流水号</div>
                            </div>
                            <div class="item-value" v-for="(vi, ki) in v.list" :key="ki">
                                <div class="item-value-one">{{ vi.payAmt >= 0 ? '支付时间：' : '退款时间：' }}{{ vi.payDate }}</div>
                                <div :class="vi.payAmt >= 0 ? 'item-value-two' : 'col'">{{ formatNumber(vi.payAmt) }}</div>
                                <div class="item-value-three">{{ vi.payName }}</div>
                                <div class="item-value-four">{{ vi.itemCode }}</div>
                            </div>
                        </div>
                    </div>
                </div> 
                </div>
                <div class="orderTable-container-bottom" @click="onBottomBtn" v-if="isFullscreen == true">
                    <div v-for="(v, k) in footerBtn" :key="k"  >
                        <div class="bottom-btn" :data-use="v.canNotUse"  v-has-role="v.role" v-if="v.title != '点单'"
                        :class="{ spe: v.title == '结账' || v.title == '点单', active: v.canNotUse || ((v.title == '结账' && checkoutCon == false) || (v.title == '点单' && orderCon == false)) }"
                        :data-type="v.title">{{ v.showTitle }}</div>
                        <div class="bottom-btn" :data-use="v.canNotUse"  v-else
                        :class="{ spe: v.title == '结账' || v.title == '点单', active: v.canNotUse || ((v.title == '结账' && checkoutCon == false) || (v.title == '点单' && orderCon == false)) }"
                        :data-type="v.title">{{ v.showTitle }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="orderTable-container-footer">富德快Saas智能收银软件</div>
    </div>
    <!-- 修改房台信息弹窗 -->
    <el-dialog v-model="updTabInfo" :close-on-click-modal="false" class="dailog" width="60%">
        <div class="popup">
            <div class="popup-title">
                <div class="popup-title-item">桌号：{{ form.roomName }}</div>
            </div>
            <div class="popup-main">
                <!-- <el-form ref="form" :model="form" > -->
                <div class="form">
                    <div class="form-item">
                        <el-form-item label="手机号码：" class="form-item-child">
                            <el-input v-model="form.memberMobile" type="number" @blur="searchInfo"></el-input>
                        </el-form-item>
                        <el-form-item label="客户姓名：">
                            <el-input v-model="form.memberName"></el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <el-form-item label="就餐人数:：">
                            <el-input v-model="form.peopleNumber" type="number">
                                <template #suffix>
                                    <span class="input-span">人&nbsp;</span>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="性别：">
                            <el-radio-group v-model="form.sex">
                                <el-radio value="011001">男</el-radio>
                                <el-radio value="011002">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <el-form-item label="到店时间：">
                            <el-time-select placeholder="选择日期" v-model="showTime" start="00:00" end="23:59" step="00:01"
                                style="width: 100%;" :suffix-icon="IconClock" :disabled="true"></el-time-select>
                        </el-form-item>
                        <el-form-item label="低消：">
                            <el-input v-model="form.minConsume">
                                <template #suffix>
                                    <span class="input-span">元&nbsp;</span>
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <el-form-item label="来源：">
                            <el-select v-model="form.sourceTypeCode" placeholder="请选择来源" :suffix-icon="IconDropDown"
                                @change="formSourceChange">
                                <el-option :label="v.label" :value="v.value" v-for="(v, k) in fromList"
                                    :key="k"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订台人：">
                            <!-- <el-select v-model="form.maintainUserCode" placeholder="请选择订台人" filterable :suffix-icon="IconDropDown"
                                :disabled="form.sourceTypeCode != '104004'">
                                <el-option :label="v.label" :value="v.value" v-for="(v, k) in customerManageList"
                                    :key="k"></el-option>
                            </el-select> -->
                            <el-tree-select
                                    v-model="selectedValueText"
                                    :data="treeData"
                                    :props="{
                                        label: 'label',
                                        value: 'value',
                                        children: 'children',
                                    }"
                                    clearable
                                    placeholder="请选择订台人"
                                    :suffix-icon="IconDropDown"
                                    @change="handleSelectionChange"
                                    filterable 
                                />
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <el-form-item label="服务员：">
                            <el-select v-model="form.waiterUserCode" filterable placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option :label="v.label" :value="v.value" v-for="(v, k) in waiterList"
                                    :key="k"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="特殊要求：">
                            <el-select v-model="form.specialRequireTypeCode" placeholder="请选择" :suffix-icon="IconDropDown">
                                <el-option :label="v.label" :value="v.value" v-for="(v, k) in speAskList"
                                    :key="k"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="form-speItem">
                        <el-form-item label="备注：">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                    </div>
                    <div class="form-footer">
                        <div></div>
                        <div class="form-footer-btn">
                            <div class="btn-cancle" @click="updTabInfo = false">取消</div>
                            <div class="btn-submit" @click="onSubmit">确认</div>
                        </div>
                    </div>
                    <!-- </el-form> -->
                </div>
            </div>
        </div>
    </el-dialog>
    <TableSelect v-model="tableSelectShow" @cancel="tableSelectShow = false" :oldRoomCode="tableInfo.roomCode"
        :consumeCode="tableInfo.consumeCode"></TableSelect>
   
    <el-dialog v-model="confirmShow" :close-on-click-modal="false" class="dailog" width="40%">
        <div class="confirmPopue">
            <div class="confirmPopue-title">提示</div>
            <div class="confirmPopue-center">确定要清台吗？</div>
            <div class="popup-btn">
                <div class="btn-cancle" @click="confirmShow = false">取消</div>
                <!-- <div class="btn-submit" @click="confirmClearTable()">确认</div> -->
                <el-button class="btn-submit"  @click="confirmClearTable" :loading="loadingFlag" >确认</el-button>
            </div>
            <div class="popup-last" @click="updRoomDate()">
                <div class="popup-last-btn">更新支付中房台状态</div>
            </div>
        </div>
    </el-dialog>

    <!-- <el-dialog v-model="changeMarkShow" :close-on-click-modal="false" class="dailog" width="40%">
        <div class="confirmPopue">
            <div class="confirmPopue-title">提示</div>
            <div class="mark-title">当前下单人：{{ nowMark }}</div>
            <div class="mark-choose">选择下单人：
                <el-tree-select
                    v-model="selectedValueText"
                    :data="treeData"
                    :props="{
                        label: 'label',
                        value: 'value',
                        children: 'children',
                    }"
                    class="tree-select"
                    clearable
                    placeholder="请选择下单人"
                    :suffix-icon="IconDropDown"
                    @change="handleSelectionChange"
                    filterable 
                />   
            </div>
                           
            <div class="popup-btn">
                <div class="btn-cancle" @click="changeMarkShow = false">取消</div>
                <div class="btn-submit" @click="doUpdateConsumeMarketUser">确认</div>
            </div>
        </div>
    </el-dialog> -->

    <ZDialog v-model="forceUnLockShow" width="40%" title="提示" content="确定要强制解锁吗？" @cancel="forceUnLockShow = false"
        @confirm="confirmUnLock()"></ZDialog>
    <ZDialog v-model="confirmReset" width="40%" title="提示" content="确定要撤销买单吗？" @cancel="confirmReset = false"
        @confirm="confirmResetOrder()"></ZDialog>
    <ZDialog v-model="toPayShow" width="40%" title="提示" content="你有支付中的订单未完成 请完成后点单" @cancel="toPayShow = false"
        @confirm="confirmToPay()"></ZDialog>
    <UseTicketDialog v-if="UseTicketDialogVisible" ref="UseTicketDialogRef" :visible="UseTicketDialogVisible"
        @emitCancel="emitUseTicketDialogCancel" @emitSubmit="emitUseTicketDialogSubmit" />
        <LiantaiTableSelect v-if="LiantaiTableSelectShow" v-model="LiantaiTableSelectShow"
        @cancel="LiantaiTableSelectShow = false" @confirm="selectTable" />
        <tispDialog v-model="tispShow" v-if="tispShow" width="30%" title="温馨提示"  :RoomList="LiantaiRoomList" @cancel="tispShow = false"
        @confirm="LiantailSubmit"></tispDialog>
</template>

<script setup>
import Api from "@/api";
import IconDropDown from "@/components/Icon/IconDropDown.vue";
import IconClock from "@/components/Icon/IconClock.vue";
import TableSelect from "./TableSelect.vue";
import {
    transformArrayProps,
    formatNumber,
    valiTime,
    validateMobile,
} from "@/lib/util.js";
import useConfigStore from "@/store/config";
import ls from "@/lib/ls";
import { ElNotification } from "element-plus";
import { getLocalIPv4 } from "@/utils/getip.js";
import ZDialog from "@/components/Dialog/Dialog.vue";
import UseTicketDialog from "./useTicketDialog.vue";
import useGoodsStore from '@/store/goods'
import LiantaiTableSelect from '@/views/components/LiantaiTableSelect.vue'
import tispDialog from "./tispDialog.vue";

const orgCode = ls.get('USER_INFO') ? ls.get('USER_INFO').orgCode : ''  

const goodsStore = useGoodsStore()
const minConsume = ref(0) // 低消金额 最后一部结账校验，其余的也可校验

const configStore = useConfigStore();
const router = useRouter();
const route = useRoute();

const isShowALLrecord = ref(false) // 总金额和支付记录是否显示

//套餐详情
const packageInfoShow = ref(false)
const packageList = ref([])
const packageInfo = (subGoods) => {
    console.log(subGoods)
    packageList.value = []
    packageInfoShow.value = true
    packageList.value.push(subGoods)
}
const forceUnLockShow = ref(false)
const forceUnLock = () => {
    forceUnLockShow.value = true
}
const confirmUnLock = () => {
    Api.Common.PcObjProcess.Do({
        functionName: "ForceUnLockConsumeCode",
        contentData: { consumeCode: tableInfo.consumeCode }
    }).then(res => {
        console.log(res);
        ElNotification({
            title: "提示",
            message: "强制解锁成功",
            type: "success",
        });
        forceUnLockShow.value = false
    })
}

// ----------------------------- 修改下单人 -------------------------------------
const filterUserNameMain = (allName,k) => {
  if(allName){
    let result = ''
    // 切割 - 获取第一个
    let nameList = allName.split('-')
    result = nameList[k]
    return result
  }else{
    return ''
  }
  
}

const changeMarkShow = ref(false)
// 唤起下单人弹窗
const updateConsumeMarketUserForm = ref({
    orderBatchCode:'',
    marketUser:'',
    marketUserName:''
})
const nowMark = ref('')
const changeCode = ref('')
const doShowMark = (e,scope)=>{
    changeCode.value = e.orderBatchCode
    changeMarkShow.value = true
    nowMark.value = e.marketUserName
    updateConsumeMarketUserForm.value.orderBatchCode = e.orderBatchCode
    
}

const changeMarketUser = (value) => {
    console.log(value);
    if(value == '-1'){
        selectedValue.value = value
        updateConsumeMarketUserForm.value.marketUser = ''
        selectedValueText.value = ''
        doUpdateConsumeMarketUser()

        
    }else{
        selectedValue.value = value
        updateConsumeMarketUserForm.value.marketUser = value

        console.log(selectedValue.value,'dasdad')
        
        // selectedValueText.value = value
        // 遍历 treeData 查找匹配的节点
        for (let group of treeData.value) {
            // 遍历该组的子节点（children）
            for (let child of group.children) {
            // 判断子节点的 value 是否与选中的值匹配
            if (child.value === value) {
                // 拼接上一级的 label（父节点）和当前子节点的 label
                const result = `${group.label} - ${child.label}`;
                // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
                selectedValueText.value = result;
                return doUpdateConsumeMarketUser(); // 找到匹配项后结束函数
            }
            }
        }
    }
   
    
}; 


const  doUpdateConsumeMarketUser = ()=>{
    updateConsumeMarketUserForm.value.marketUserName = selectedValueText.value
    console.log(updateConsumeMarketUserForm.value);
    
    Api.Common.PcObjProcess.Do({
        functionName: "UpdateConsumeMarketUser",
        contentData: updateConsumeMarketUserForm.value 
    }).then(res=>{
        ElNotification({
            title: "提示",
            message: "修改成功",
            type: "success",
        });
        changeMarkShow.value = false
        getTableList(true); 
    })
}



// ------------------------------------------- 左侧支付状态 -------------------------------------------------
const tableState = ref(0); // 支付状态 （0全部、1支付中、2已支付）
const tableActive = ref(0); // 左侧高亮显示
const payToolPayCode = ref('') // 工具payBatchCode（第二个）
const isGift = ref(0) // 该单是否是赠送
const cur_pay = ref({})
// 支付状态改变
const changeTableState = (val, k, code, payAmt, v) => {
    if(loadingTable.value){
        return
    }
    changeMarkShow.value = false
    console.log(k);
    console.log(v,'vvvvv');
    cur_pay.value = v
    isGift.value = 0
    if (v) {
        isGift.value = v.isGift
    }
    recordsState.value = 0; // 退换菜和赠送记录高亮取消
    navBtnList.value = navBtnList.value.map((item) => {
        return { ...item, canNotUse: false };
    });

    switch (val) {
        case "0": // 全部
            tableActive.value = k;
            tableState.value = 0; // 全部
            payState.value = 0; // 未结账
            recordsState.value = 0; // 赠送记录、退换菜记录取消显示
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "是否叫起",
                "状态",
                "客户信息",
            ];
            tableShowListForm.value.payBatchCode = ""; // 全部的买单批次为空
            tableShowListForm.value.state = "1";
            hasPay.value = payAmt; // 已结账
            toolPayBatchCode.value = "";
            getTableList(true);
            // 全部（k=0）无法撤销买单
            navBtnList.value.forEach(item => {
                    if (item.title === "撤销买单") {
                        item.canNotUse = true; 
                    }
                    if (item.title === "分单") {
                        item.canNotUse = true; // 暂时禁用未结账分单
                    }
            });
            break;

        // case '1': // 支付中
        // tableActive.value = k
        // tableState.value = 1 // 支付中
        // payState.value = 2
        // tableShowItem.value = ['点单员', '下单时间', '收银员','最后支付时间','状态']
        // payBatchCode.value = code
        // tableShowListForm.value.payBatchCode = code // 获取表格数据的买单批次号
        // tableShowListForm.value.state = '3'
        // paying.value = payAmt
        // getTableList(true) // 获取表格数据
        // getPayList() // 获取支付记录
        // getPayStatistics() // 获取金额统计

        // navBtnList.value = navBtnList.value.map(item => {
        //     // 禁用部分按钮
        // if (item.title === '分单' || item.title === '换菜' || item.title === '退菜') {
        //     // 将特定项的canNotUse属性设置为true
        //     return { ...item, canNotUse: true };
        // }
        //     return item;
        // });

        //     break;
        case "2": // 已支付
            tableActive.value = k;
            tableState.value = 2; // 已支付
            payState.value = 1;
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "是否叫起",
                "付款方式",
                "收银员",
                "数据类型",
                "状态",
            ];
            toolPayBatchCode.value = code;
            tableShowListForm.value.payBatchCode = code;
            tableShowListForm.value.state = "2";
            isShowALLrecord.value = true
            console.log(v);
            if(v.isDamage){ // isDamage是否是损赔损赔  1 损赔商品
                navBtnList.value.forEach(item => {
                    if (item.title === "撤销买单") {
                        item.canNotUse = true; // 损赔损赔不能撤销买单
                    }
                });
            }
            if(v.isPreAmtAndOtherPayType){
                navBtnList.value.forEach(item => {
                    if (item.title == "换菜" || item.title == "退菜") {
                        item.canNotUse = true; // 赠送金额和微信支付宝等其它同时使用时不能换菜退菜
                    }
                });
            }
            if(v.isUseTicket){
                navBtnList.value.forEach(item => {
                    if (item.title == "换菜"  || item.title == "退菜") {
                        item.canNotUse = true; // 使用优惠券不能换菜退菜
                    }
                });
            }
            if(v.isUseCoins){  // 金币不能退菜 （金币退款有问题  金币没有分摊在商品中）
                navBtnList.value.forEach(item => {
                    if (item.title == "换菜"  || item.title == "退菜") {
                        item.canNotUse = true; // 损赔损赔不能换菜退菜
                    }
                });
            }
            // if(v){
            //      if(v.isGift == '1'){
            //         hasPay.value = 0;
            //      }else{
            //         hasPay.value = payAmt;
            //      }
            // }
            hasPay.value = payAmt;
            getTableList(true); // 获取表格数据
            getPayList(); // 获取支付记录
            getPayStatistics(); // 获取金额统计
            break;
    }
    
    btnControl();  // 位置不能变（确保能控制按钮（下面有return））

    if (k == 0) {

        return
    }
    if (payList.value[k - 1].processState == '2' && payList.value[k - 1].payAmt == 0) {
        navBtnList.value = [
            {
                title: "分单",
                canNotUse: false,
                role:'order-split'
            },
            {
                title: "换菜",
                canNotUse: true,
                role:'order-change'
            },
            {
                title: "退菜",
                canNotUse: false,
                role:'order-returning'
            },
            {
                title: "清台记录",
                canNotUse: false,
                role:'order-clearLog'
            },
            {
                title: "撤销买单",
                canNotUse: false,
                role:'order-check-revoke'
            },
            {
                title: "核销券",
                canNotUse: false,
                role:'order-ticket-check'
            },

        ]
    }
    if (payState.value == 1) { // 已结账状态不能分单
        navBtnList.value[0].canNotUse = false  
    }
};
// 监听左侧切换
watch(() => tableState.value, (newValue, oldValue) => {
    console.log(newValue);
    if (newValue == '0') {
        // console.log(navBtnList.value);
        navBtnList.value.forEach(item => {
            if (item.title === "撤销买单") {
                item.canNotUse = true;
            }
        });
    }else{
        footerBtn.value.forEach(item => {
            if (item.title == "打印") {
                item.showTitle = '打印收银小票';
            }
        });
    }
})
// 监听是否是赠送订单
watch(() => isGift.value, (newValue, oldValue) => {
    console.log(isGift.value,1111111111111111111);
    
    if (newValue == '1') {
        console.log(navBtnList.value,'赠送');
        navBtnList.value.forEach(item => {
            if (item.title === "换菜") {
                item.canNotUse = true;
            }
        });
    }
})

// --------------------------------- 合并表格 ------------------------------------------

const objectSpanMethod = ({column,rowIndex })=>{
  
    
    // const row = tableShowList.value;
      // 如果是订单号列，检查是否是相同的订单号
      if (column.label == '下单员') {
        let rowspan = 1;
        for (let i = rowIndex + 1; i < tableShowList.value.length; i++) {
          if (tableShowList.value[i].orderBatchCode == tableShowList.value[i - 1].orderBatchCode) {
            rowspan++;
          } else {
            break;
          }
        }
        return { rowspan, colspan: 1 }; // 需要合并的行数
      }
      return { rowspan: 1, colspan: 1 };

}
  
const cellStyle = (data) => {
  if (data.column.label == '下单员') {
    return { "background-color": "#fffbe5 " };
  }
}


// -------------------------------------- 未结账、已结账、支付中 --------------------------------------------
const payState = ref(0); // 未结账、已结账、支付中状态
// 状态改变
const payStateChange = (e) => {
    changeMarkShow.value = false
    if (e.target.dataset.type) {
        recordsState.value = 0; // 退换菜和赠送记录高亮取消
        // 激活按钮
        navBtnList.value = navBtnList.value.map((item) => {
            if (item.title != '撤销买单' && item.title != '分单') {  // 暂时禁用分单
                return { ...item, canNotUse: false };
            }
            return item
        });
    }
    isShowALLrecord.value = true
    switch (e.target.dataset.type) {
        case "未结账":
            payState.value = 0;
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "是否叫起",
                "状态",
                "客户信息",
            ];
            tableShowListForm.value.state = "1";
            // 如果左侧栏为全部 点击已结账和支付中获取的支付记录和汇总不要传PayBatchCode
            if (tableState.value == 0) {
                tableShowListForm.value.payBatchCode = ''
            }
            break;

        case "已结账":
            payState.value = 1;
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "是否叫起",
                "付款方式",
                "收银员",
                "数据类型",
                "状态",
            ];
            tableShowListForm.value.state = "2";
            // 如果左侧栏为全部 点击已结账和支付中获取的支付记录和汇总不要传PayBatchCode
            if (tableState.value == 0) {
                toolPayBatchCode.value = "";
                tableShowListForm.value.payBatchCode = ''
            }
            getPayList(); // 获取支付记录
            getPayStatistics(); // 获取金额统计
            break;
        case "支付中":
            payState.value = 2;
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "收银员",
                "最后支付时间",
                "状态",
            ];
            tableShowListForm.value.state = "3";
            navBtnList.value = navBtnList.value.map((item) => {
                // 禁用部分按钮
                if (
                    item.title === "分单" ||
                    item.title === "换菜" ||
                    item.title === "退菜" ||
                    item.title === "撤销买单"
                ) {
                    // 将特定项的canNotUse属性设置为true
                    return { ...item, canNotUse: true };
                }
                return item;
            });
            // 如果左侧栏为全部 点击已结账和支付中获取的支付记录和汇总不要传PayBatchCode
            console.log(payToolPayCode.value);
            if (tableState.value == 0) {
                toolPayBatchCode.value = payToolPayCode.value;
                tableShowListForm.value.payBatchCode = payToolPayCode.value
                console.log(tableShowListForm.value);
            }
            console.log(paying.value);
            if (paying.value > 0) { // 支付中金额为0时不显示底部统计
                isShowALLrecord.value = true
            } else {
                isShowALLrecord.value = false
            }
            // toolPayBatchCode.value = payToolPayCode.value
            getPayList(); // 获取支付记录
            getPayStatistics(); // 获取金额统计
            break;
        case "查看全部":
            tableState.value = 0;
            tableActive.value = 0;
            payState.value = 0;
            tableShowListForm.value.state = '1'
            console.log(tableShowListForm.value);
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "是否叫起",
                "状态",
                "客户信息",
            ];

            break;
    }
    if (e.target.dataset.type) {
        getTableList(true);
    }
    if (payState.value == 1 && tableState.value == 0) {
        navBtnList.value = [
            {
                title: "分单",
                canNotUse: false,
                role:'order-split'
            },
            {
                title: "换菜",
                canNotUse: true,
                role:'order-change'
            },
            {
                title: "退菜",
                canNotUse: true,
                role:'order-returning'
            },
            {
                title: "清台记录",
                canNotUse: false,
                role:'order-clearLog'
            },
            {
                title: "撤销买单",
                canNotUse: true,
                role:'order-check-revoke'
            },
            {
                title: "核销券",
                canNotUse: false,
                role:'order-ticket-check'
            },
        ]
    }
    btnControl();
};
// 监听结账状态切换（头部）
watch(() => payState.value, (newValue, oldValue) => {
    console.log(newValue);
    if(newValue == '0'){
        navBtnList.value.forEach(item => {
            if (item.title === "分单") {
                item.canNotUse = true;  // 暂时禁用未结账分单（等后面分单bug修改完后打开）同  const navBtnList = ref([ 这一行
            }
        });
        footerBtn.value.forEach(item => {
            if (item.title == "打印") {
                item.showTitle = '打印预结小票';
            }
        });
    }else if(newValue == '1'){
        navBtnList.value.forEach(item => {
            if (item.title === "分单") {
                item.canNotUse = false;
            }
        });
        if(tableState.value == '0'){
            footerBtn.value.forEach(item => {
                if (item.title == "打印") {
                    item.showTitle = '打印收银总单';
                }
            });
        }else{
            footerBtn.value.forEach(item => {
                if (item.title == "打印") {
                    item.showTitle = '打印收银小票';
                }
            });
        }
        
    }else if(newValue == '2'){
        navBtnList.value.forEach(item => {
            if (item.title === "分单") {
                item.canNotUse = true;
            }
        });
        footerBtn.value.forEach(item => {
            if (item.title == "打印") {
                item.showTitle = '打印预结小票';
            }
        });
    }
    
})
// --------------------------------------------- 赠送记录、退换菜记录 ---------------------------------------------------
const recordsState = ref(0);

const reocrdsChange = (v) => {
    if (v) {
        payState.value = 99; // 支付状态高亮清空
        recordsState.value = 0; // 退换菜和赠送记录高亮取消
        // 激活按钮
        navBtnList.value = navBtnList.value.map((item) => {
            if (item.title != "撤销买单" && item.title != "分单") { // 暂时禁用分单
                return { ...item, canNotUse: false };
            }
            return item;
        });
    }
    switch (v) {
        case 1: // 赠送记录
            tableShowItem.value = ["赠送人", "赠送时间", "是否叫起", "状态"];
            getGifrecords(true);
            break;

        case 2: // 退换菜记录
            tableShowItem.value = [
                "点单员",
                "下单时间",
                "操作人",
                "操作时间",
                "状态",
            ];
            getChangeFood(true);

            navBtnList.value = navBtnList.value.map((item) => {
                // 禁用部分按钮
                if (item.title != "清台记录") {
                    // 将特定项的canNotUse属性设置为true
                    return { ...item, canNotUse: true };
                }
                return item;
            });
            break;
    }
    recordsState.value = v; // 高亮切换

    btnControl();
};
// 赠送记录、退换菜记录 底部统计不显示
watch(
    () => recordsState.value,
    (newValue, oldValue) => {
        if (recordsState.value == 1 || recordsState.value == 2) {
            isShowALLrecord.value = false
        } else {
            isShowALLrecord.value = true
        }
    }
);
// -------------------------------------------- table表格可显示的内容 --------------------------------------------------------
const tableShowItem = ref([
    "点单员",
    "下单时间",
    "是否叫起",
    "状态",
    "客户信息",
]);
const isShow1 = computed(() => tableShowItem.value.includes("点单员"));
const isShow2 = computed(() => tableShowItem.value.includes("下单时间"));
const isShow3 = computed(() => tableShowItem.value.includes("是否叫起"));
const isShow4 = computed(() => tableShowItem.value.includes("状态"));
const isShow5 = computed(() => tableShowItem.value.includes("客户信息"));
const isShow6 = computed(() => tableShowItem.value.includes("付款方式"));
const isShow7 = computed(() => tableShowItem.value.includes("收银员"));
// const isShow8 = computed(() => tableShowItem.value.includes('数据类型'));
const isShow9 = computed(() => tableShowItem.value.includes("最后支付时间"));
const isShow10 = computed(() => tableShowItem.value.includes("赠送人"));
const isShow11 = computed(() => tableShowItem.value.includes("赠送时间"));
const isShow12 = computed(() => tableShowItem.value.includes("操作人"));
const isShow13 = computed(() => tableShowItem.value.includes("操作时间"));
// 表格上下页切换
const tablePageChange = (e) => {
    // console.log(e.target.dataset.type);
    if (e.target.dataset.type == "down") {
        if (tableShowList.value.length < tableShowListForm.value.pageSize) {
            return;
        } else {
            tableShowListForm.value.pageIndex++;
        }
    } else {
        if (tableShowListForm.value.pageIndex <= 1) {
            return;
        } else {
            tableShowListForm.value.pageIndex--;
        }
    }
    // 支付状态清空 （可以是赠送记录和退换菜记录）
    if (payState.value == 99 && recordsState.value == 1) {
        // 赠送记录
        getGifrecords();
    } else if (payState.value == 99 && recordsState.value == 2) {
        // 退换菜记录
        getChangeFood();
    } else if (recordsState.value == 0) {
        getTableList();
    }
};

// ------------------------------------------------- 出品补单、传送补单..... 清台记录 ----------------------------------------------------------------------------
const confirmReset = ref(false)
const onNavChange = (e) => {
    const title = e.target.dataset.type;
    const canNotUse = e.target.dataset.use;
    if (canNotUse == "true") {
        return;
    }
    // console.log(title,canNotUse);
    if (recordsState.value == 2 && title != "清台记录") {
        return;
    }
    // console.log(111);
    switch (title) {
        case "出品补单":
            break;
        case "传送补单":
            break;
        case "起菜":
            break;
        case "发票":
            break;
        // case "催单":
        //     break;
        case "分单":
            console.log(payState.value);
            
            if (payState.value == 0) {
                router.push({
                    path: "/order/splitOrder",
                    query: { state: 1 },
                });
            } else {
                router.push({
                    path: "/order/splitOrder",
                    query: { state: 2, payBatchCode:cur_pay.value?.payBatchCode },
                });
            }
            break;
        case "换菜":
            if (!changeCon.value) return
            const ls_orderChange = ls.get('orderChange')
            if (ls_orderChange) {
                router.push({
                    path: '/order/payment',
                    query: {
                        // itemCodeList: itemCodeList.join(','),
                        contentData: ls_orderChange.routerQuery.contentData,
                        oldItemCode: ls_orderChange.routerQuery.oldItemCode,
                        price: ls_orderChange.routerQuery.price,
                        vipPrice: ls_orderChange.routerQuery.vipPrice,
                        consumeCode: ls_orderChange.routerQuery.consumeCode,
                        roomCode: ls_orderChange.routerQuery.roomCode,
                        payBatchCode: ls_orderChange.routerQuery.payBatchCode,
                        todo: 'orderChange'
                    }
                })
            } else {
                console.log('cur_pay.value :>> ', cur_pay.value);
                // isDamage 是否是损赔商品
                // if (payState.value == 0 && !cur_pay.value.isDamage) {
                if (payState.value == 0 ) {
                    router.push({
                        path: "/replaceDishes",
                        query: { state: 1, payBatchCode: toolPayBatchCode.value }, // state = 0 所有商品  1 未结账商品  2 已结账 3 支付中
                    });
                } else if (payState.value != 0 && !cur_pay.value.isDamage) { // 已支付并且不是损赔商品
                    router.push({
                        path: "/replaceDishes",
                        query: { state: 2, payBatchCode: toolPayBatchCode.value },
                    });
                //  ------------------------------ 损赔商品 （目前损赔商品没有未支付，只有已结账和支付中）---------------------------------
                // }else if (payState.value == 0 && cur_pay.value.isDamage) { // 未支付并且是损赔商品
                //     router.push({
                //         path: "/replaceLoss",
                //         query: {state: 1, payBatchCode: toolPayBatchCode.value },
                //     });
                }else if (payState.value != 0 && cur_pay.value.isDamage) {
                    router.push({
                        path: "/replaceLoss",
                        query: { state: 2,payBatchCode: toolPayBatchCode.value },
                    });
                }
            }

            break;
        case "退菜":
            if (!returningCon.value) return
            if (payState.value == 0) { // 未结账退菜
                router.push({
                    path: "/order/returnFood",
                    query: { state: 1, payBatchCode: toolPayBatchCode.value },
                });
            } else {
                router.push({ // 已付款退菜
                    path: "/order/returnFood",
                    query: { state: 2, payBatchCode: toolPayBatchCode.value },
                });
            }
            break;
        case "清台记录":
            router.push({ path: "/order/clearRecords" });
            break;
        case "撤销买单":
            confirmReset.value = true
            break;
        case "核销券":
            handleUseTicket()
            break;
    }
};
    const pauseStatus = ref(true)
    const hasDlsplay = ref(false)
    const pauseText = ref('挂起')
     
    const kitchenChaneg = (type)=> {
              if(type == 1) {
                Api.Common.PcObjProcess.Do({
                    functionName: "KitchenPauseDish",
                    contentData: {
                        "roomCode": tableInfo.roomCode,
                        "consumeCode": tableInfo.consumeCode,
                        "pause":pauseStatus.value 
                    }
                }).then(res => {
                ElNotification({
                    title: "提示",
                    message: '操作成功',
                    type: "success",
                    });
                pauseStatus.value  = !pauseStatus.value 
                KitchenGetOrder()
            })
              } else {
                Api.Common.PcObjProcess.Do({
                    functionName: "KitchenHastenDish",
                    contentData: {
                        "roomCode": tableInfo.roomCode,
                        "consumeCode": tableInfo.consumeCode,
                    }
                }).then(res => {
                        console.log(res);
                        ElNotification({
                            title: "提示",
                            message: "催单成功",
                            type: "success",
                        });
                    })
              }
    }
    
    const KitchenGetOrder = ()=> {
            Api.Common.PcObjProcess.Do({
                functionName: "KitchenGetOrder",
                contentData: {
                    "roomCode": ls.get("TABLE_INFO").roomCode,
                    "consumeCode": ls.get("TABLE_INFO").consumeCode,
                }
            }).then(res => {
                const shopInfo = configStore.shopInfo
                if (shopInfo.kitchen) { 
                    if(res?.code != undefined) {
                        hasDlsplay.value = true;  
                        if(res.pause) {
                            pauseText.value = '取消挂起'
                        } else{ 
                            pauseText.value = '挂起'
                        }
                     }
                }      
        })
    }

    KitchenGetOrder()

// 撤销买单
let OrderPayCancelFlag = ref(false)
const confirmResetOrder = () => {
    if(OrderPayCancelFlag.value){
        ElNotification({
            title: "提示",
            message: "加载中，请稍等",
            type: "success",
        });
        return
    }
    OrderPayCancelFlag.value = true
    Api.Common.PcObjProcess.Do({
        functionName: "OrderPayCancel",
        contentData: {
            "payBatchCode": toolPayBatchCode.value,
            "consumeCode": tableInfo.consumeCode,
            "roomCode": tableInfo.roomCode,
            "ip": ip.value
        }
    }).then(res => {
        console.log(res);
        ElNotification({
            title: "提示",
            message: "撤销买单成功",
            type: "success",
        });
        confirmReset.value = false
        tableState.value = 0; // 全部
        tableActive.value = 0;
        payState.value = 0; // 未结账
        getTableInfo()
        OrderPayCancelFlag.value = false
        toolPayBatchCode.value = ''
        getTableList(true); // 获取表格数据
        // getPayList(); // 获取支付记录
        // getPayStatistics(); // 获取金额统计
    }).catch(err=>{
        OrderPayCancelFlag.value = false
    })
}
// ------------------------------------------------------------ 修改房台信息 ---------------------------------------------
// 获取房台信息
const getUpadTableInfo = () => {

    Api.Common.PcObjProcess.Do({ "functionName": "getConsumeInfo", "contentData": consumeCode.value })
        .then(res => {
            console.log(res);
            updTabInfo.value = true
            form.value.isSendMsm = '1'
            form.value = res.result[0]
            // selectedValueText.value = res.result[0].maintainUserName
            if(consumeInfo.value.consumeSourceType == '营销') {
                selectedValueText.value = consumeInfo.value.maintainUserName
            } else {
                selectedValueText.value = consumeInfo.value.consumeSourceType
            }
            console.log(selectedValueText.value,'selectedValueText.value')
            // console.log(res.result[0],'sdsadadxxxxxxxxxxx')
            selectedValue.value  = res.result[0].maintainUserCode
        })
}
console.log();
const showTime = ref(ls.get("TABLE_INFO").startTime); // 到店时间（显示时间）
const updTabInfo = ref(false); // 修改房台信息弹窗
const form = ref({
    memberName: '', // 会员姓名
    roomCode: '', // 房台号
    reserveCode: '',
    callCode: '',
    memberMobile: '', // 手机号码
    memberOpenid: '',
    sex: '011001', // 性别
    sourceTypeCode: '', // 来源
    openTime: ls.get('TABLE_INFO').startTime, // 开台时间
    waiterUserCode: '', // 开台人
    maintainUserCode: '', // 订台人
    arrivedPeoperCount: '1', // 人数
    minConsume: '', // 低消
    specialRequireTypeCode: '', // 特殊要求
    remark: '',
    isSendMsm: '1', // 是否发送短信
    reserveTime: '', // 计划到达时间
})
// 手机号码失去聚焦
const searchInfo = (e) => {
    if (!form.value.memberMobile) {
        return;
    }
    if (!validateMobile(form.value.memberMobile)) return;
    Api.Common.PcObjProcess.Do({
        functionName: "GetMemberInfo",
        orgCode: "0004",
        contentData: { mobile: form.value.memberMobile },
    }).then((res) => {
        if (res.name) {
            form.value.memberName = res.name;
        }
    });
};

// }
// 修改房台弹窗来源变化
const formSourceChange = (e) => {
    //   console.log(e);
    if (e != "104004") {
        form.value.maintainUser = "";
        form.value.maintainUserCode = ''
    }
};
// 短信通知改变
const radioChange = (e) => {
    if (form.value.isSendMsm == "0") {
        form.value.isSendMsm = "1";
    } else {
        form.value.isSendMsm = "0";
    }
};
// 提交
const onSubmit = () => {
    if (form.value.memberMobile) {
        if (!validateMobile(form.value.memberMobile)) return;
    }
    form.value.maintainUserCode  = selectedValue.value //訂台code
    form.value.maintainUserName  = selectedValueText.value //訂台名称
    console.log(form.value);
    Api.Common.PcObjProcess.Do({
        functionName: "ConsumeEdit",
        contentData: form.value,
    }).then((res) => {
        console.log(res);
        ElNotification({
            title: "提示",
            message: "修改房台信息成功",
            type: "success",
        });
        updTabInfo.value = false;
        getTableInfo(); // 获取结账主页左侧栏和头部信息
    });
};
// ---------------------------------------------------------- 底部按钮 -----------------------------------------------------------------
const tableSelectShow = ref(false); // 转台弹窗
// console.log(ls.get('TABLE_INFO'));
const tableInfo = ls.get("TABLE_INFO");
// console.log(tableInfo);
const payBatchCode = ref(""); // 结账单号 （跳转结账页面要用）

const onBottomBtn = (e) => {
    const canNotUse = e.target.dataset.use;
    if (canNotUse == "true") {
        return;
    }
    // console.log(e.target.dataset.type);
    switch (e.target.dataset.type) {
        case "损赔":
            router.push({ path: "/lossOrder" });
            break;
        case "操作记录":
            router.push({ path: "/order/orderRecords" });
            break;
        case "转台":
            tableSelectShow.value = true;
            break;
        case "结账":
            if (!checkoutCon.value) return
            if (!unPay.value && !paying.value) return ElNotification({
                title: "提示",
                message: "没有需要支付的商品",
                type: "warning",
            }); 
            router.push({
                path: "/order/pay",
                query: {
                    hasPay:hasPay.value,
                    minConsume:minConsume.value,
                    consumeCode: totalComsume.value.consumeCode,
                    payBatchCode: payBatchCode.value, // 用来获取支付中的商品
                },
            });
            break;
        case "点单":
            if (!orderCon.value) return
            if (paying.value) {
                toPayShow.value = true;
                return;
            }

            router.push({
                path: "/orderDishes",
                query: {
                    orderBatchCode: totalComsume.value.orderBatchCode
                },
            });
            break;
        case "打印分单":
            break;
        case "打印总单":
            break;

        case "打印":
            switch (tableState.value) {
                //全部
                case 0:
                    switch (payState.value) {
                        //未结账-打印预结小票
                        case 0:
                            Api.Common.PcObjProcess.Do({
                                functionName: "OrderPrePayPrint",
                                contentData: {
                                    consumeCode: consumeCode.value,
                                    roomCode: tableInfo.roomCode,
                                    ip: ip.value,
                                },
                            }).then((res) => {
                                ElNotification({
                                    title: "提示",
                                    message: "打印预结小票成功",
                                    type: "success",
                                });
                                // router.replace({ path: "/order" });
                            });
                            break;
                        //已结账-打印收银总单
                        case 1:
                            Api.Common.PcObjProcess.Do({
                                functionName: "OrderPayTotalPrint",
                                contentData: {
                                    consumeCode: consumeCode.value,
                                    roomCode: tableInfo.roomCode,
                                    ip: ip.value,
                                },
                            }).then((res) => {
                                ElNotification({
                                    title: "提示",
                                    message: "打印收银总单成功",
                                    type: "success",
                                });
                                // router.replace({ path: "/order" });
                            });
                            break;
                        //支付中-打印预结小票
                        case 2:
                            Api.Common.PcObjProcess.Do({
                                functionName: "OrderPrePayPrint",
                                contentData: {
                                    consumeCode: consumeCode.value,
                                    roomCode: tableInfo.roomCode,
                                    payBatchCode: payBatchCode.value,
                                    ip: ip.value,
                                },
                            }).then((res) => {
                                ElNotification({
                                    title: "提示",
                                    message: "打印预结小票成功",
                                    type: "success",
                                });
                                // router.replace({ path: "/order" });
                            });
                            break;
                    }
                    break;
                //已支付
                case 2:
                    //打印收银小票
                    Api.Common.PcObjProcess.Do({
                        functionName: "OrderPayPrint",
                        contentData: {
                            consumeCode: consumeCode.value,
                            payBatchCode: toolPayBatchCode.value,
                            ip: ip.value,
                            isPatchPrint: "1"
                        },
                    }).then((res) => {
                        ElNotification({
                            title: "提示",
                            message: "打印收银小票成功",
                            type: "success",
                        });
                        // router.replace({ path: "/order" });
                    });
                    break;
            }
            console.log(tableState.value);
            console.log(payState.value);
            console.log(consumeCode.value);
            console.log(toolPayBatchCode.value);
            break;
        case "清台":
            // console.log(151);
            confirmShow.value = true;
            break;
    }
};

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });
const toPayShow = ref(false); // 还有支付中订单弹窗
const confirmShow = ref(false);
const loadingFlag = ref(false)
// 清台
const confirmClearTable = () => {
    if(loadingFlag.value){
        ElNotification({
            title: "提示",
            message: "清台中。请稍等",
            type: "warning",
        });
    }
    loadingFlag.value = true
    Api.Common.PcObjProcess.Do({
        functionName: "roomClear",
        contentData: { roomList: tableInfo.roomCode, ip: ip.value },
    }).then((res) => {
        ElNotification({
            title: "提示",
            message: "清台成功",
            type: "success",
        });
        loadingFlag.value = false
        router.replace({ path: "/order" });
    }).catch(err=> {
        loadingFlag.value = false
    })
};
// 支付中房台状态更新（出现bug的时候用）
const updRoomDate = ()=>{
    Api.Common.PcObjProcess.Do({
        functionName: "UpdateRoomStateRoot",
        contentData: { roomCode: tableInfo.roomCode, consumeCode:tableInfo.consumeCode },
    }).then((res) => {
        ElNotification({
            title: "提示",
            message: "更新成功",
            type: "success",
        });
        router.replace({ path: "/order" });
    });
}
// 去支付
const confirmToPay = () => {
    router.push({
        path: "/order/pay",
        query: {
            consumeCode: totalComsume.value.consumeCode,
            payBatchCode: payBatchCode.value,
        },
    });
};
//--------------------------------------------------------- 页面配置 --------------------------------------------------------------
const navBtnList = ref([
    {
        title: "分单",
        canNotUse: true, // 暂时禁用未结账分单
        role:'order-split'
    },
    {
        title: "换菜",
        canNotUse: false,
        role:'order-change'
    },
    {
        title: "退菜",
        canNotUse: false,
        role:'order-returning'
    },
    {
        title: "清台记录",
        canNotUse: false,
        role:'order-clearLog'
    },
    {
        title: "撤销买单",
        canNotUse: true,
        role:'order-check-revoke'
    },
    {
        title: "核销券",
        canNotUse: false,
        role:'order-ticket-check'
    }
]);
const footerBtn = ref([
    {
        title: "损赔",
        showTitle: "损赔",
        canNotUse: false,
        role:'order-payfor'
    },
    {
        title: "操作记录",
        showTitle: "操作记录",
        canNotUse: false,
        role:'order-operLog'
    },
    {
        title: "转台",
        showTitle: "转台",
        canNotUse: false,
        role:'order-transfer'
    },
    {
        title: "结账",
        showTitle: "结账",
        canNotUse: false,
        role:'order-checkout'
    },
    {
        title: "点单",
        showTitle: "点单",
        canNotUse: false,
        role:'order-order'
    },
    {
        title: "打印",
        showTitle: "打印预结小票",
        canNotUse: false,
        role:'order-print'
    },
    {
        title: "清台",
        showTitle: "清台",
        canNotUse: false,
        role:'order-clear'
    },
]);
// // 按钮权限控制
const btnControl = () => {
    if (ls.get('TABLE_BTN')) {
        navBtnList.value = [ 
            {
                title: "分单",
                canNotUse: true,
                role:'order-split'
            },
            {
                title: "换菜",
                canNotUse: true,
                 role:'order-change'
            },
            {
                title: "退菜",
                canNotUse: true,
                role:'order-returning'
            },
            {
                title: "清台记录",
                canNotUse: false,
                role:'order-clearLog'
            },
            {
                title: "撤销买单",
                canNotUse: true,
                role:'order-check-revoke'
            },
        ];
        footerBtn.value = [
            {
                title: "损赔",
                showTitle: "损赔",
                canNotUse: true,
                role:'order-payfor'
            },
            {
                title: "操作记录",
                showTitle: "操作记录",
                canNotUse: false,
                role:'order-operLog'
            },
            {
                title: "转台",
                showTitle: "转台",
                canNotUse: true,
                role:'order-transfer'
            },
            {
                title: "结账",
                showTitle: "结账",
                canNotUse: true,
                role:'order-checkout'
            },
            {
                title: "点单",
                showTitle: "点单",
                canNotUse: true,
                role:'order-order'
            }, 
            {
                title: "打印",
                showTitle: "打印预结小票",
                canNotUse: false,
                 role:'order-print'
            },
            {
                title: "清台",
                showTitle: "清台",
                canNotUse: true,
                role:'order-clear'
            },
        ];
        console.log(navBtnList.value);
    }
};
btnControl();
const checkoutCon = ref(true)
const orderCon = ref(true)
const returningCon = ref(true)
const changeCon = ref(true)
//获取权限菜单 
// const getUserMenuButton = () => {
//     Api.Common.PcObjProcess.Do({ "functionName": "GetUserMenuButton", "contentData": { obj: "" }})
//         .then(res => {
          
//             checkoutCon.value = res.result.some(p => p.name == "order-checkout")
           
//             orderCon.value = res.result.some(p => p.name == "order-order")
            
//             returningCon.value = res.result.some(p => p.name == "order-returning")
          
//             changeCon.value = res.result.some(p => p.name == "order-change")
//         })
// }
// getUserMenuButton();



const consumeCode = ref(ls.get("TABLE_INFO").consumeCode); // 消费单号

// 获取服务员列表
const waiterList = ref([]);
const getWaiterList = () => {
    const transArea = [
        ["userCode", "value"],
        ["userName", "label"],
    ];
    waiterList.value = transformArrayProps(configStore.waiterList, transArea);
    waiterList.value.push({ value: "", label: "无" });
};
// 获取订台人列表
const customerManageList = ref([]);
const getCustomerManageList = () => {
    const transArea = [
        ["userCode", "value"],
        ["userName", "label"],
    ];
    customerManageList.value = transformArrayProps(
        configStore.customerManageList,
        transArea
    );
    customerManageList.value.push({ value: "", label: "无" });
};
// 获取来源
const fromList = ref([]);
const getFrom = () => {
    const transArea = [
        ["code", "value"],
        ["name", "label"],
    ];
    fromList.value = transformArrayProps(configStore.sourceList, transArea);
    fromList.value.push({ value: "", label: "无" });
};
// 获取特殊要求
const speAskList = ref([]);
const getSpeAsk = () => {
    const transArea = [
        ["code", "value"],
        ["name", "label"],
    ];
    speAskList.value = transformArrayProps(configStore.specialList, transArea);
    speAskList.value.push({ value: "", label: "无" });
};
// 获取取消原因
const cancleList = ref([]);
const getCancleList = () => {
    const transArea = [
        ["code", "value"],
        ["name", "label"],
    ];
    cancleList.value = transformArrayProps(configStore.cancelList, transArea);
    cancleList.value.push({ value: "", label: "无" });
};
// 获取结账主页左侧栏和头部信息
const consumeInfo = ref({}); // 头部信息
const totalComsume = ref({}); // 左侧栏汇总信息
const payList = ref([]); // 左侧栏支付信息
const unPay = ref(""); // 未结账
const hasPay = ref(""); // 已结账
const paying = ref(""); // 支付中

const getTableInfo = () => {
    Api.Common.PcObjProcess.Do({ functionName: "GetRoomOrderStateList",  contentData: { consumeCode: consumeCode.value }}).then((res) => {
        console.log('获取桌台信息res', res);
        consumeInfo.value = res.consumeInfo;
        totalComsume.value = res.totalComsume;
        payList.value = res.payList;
        unPay.value = totalComsume.value.unPayAmt;
        hasPay.value = totalComsume.value.payAmt;
        paying.value = totalComsume.value.payPendingAmt;
        payBatchCode.value = totalComsume.value.payBatchCode;
        payToolPayCode.value = totalComsume.value.payBatchCode; 
        minConsume.value = totalComsume.value.minConsume;
        
    });
};
const toolPayBatchCode = ref("");
// 获取下方金额统计
const payStatistics = ref({});
const disAmt = ref({});
const otherAmt = ref({});
const collectAmt = ref({});
const getPayStatistics = () => {
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayStatistics",
        contentData: {
            consumeCode: consumeCode.value,
            payBatchCode: toolPayBatchCode.value,
        },
    }).then((res) => {
        console.log(res);
        console.log(11);
        payStatistics.value = res;
        if (res.disAmt) {
            disAmt.value = res.disAmt;
        }
        if (res.otherAmt) {
            otherAmt.value = res.otherAmt;
        }
        if (res.collectAmt) {
            collectAmt.value = res.collectAmt;
        }
    });
};
// 获取买单支付记录
const orderPayList = ref([]);
const getPayList = () => {
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayBatchPayRecord",
        contentData: {
            consumeCode: consumeCode.value,
            payBatchCode: toolPayBatchCode.value,
        },
    }).then((res) => {
        console.log(res);
        orderPayList.value = res.result;
    });
};

// -------------------------------------------------------- 中间表格数据 ---------------------------------------------------------------------------
// 获取买单批次列表（中间表格）
const tableShowList = ref([]); // 表格显示数组
const tableShowListCount = ref(0) // 表格商品数量
const totalPages = ref(0)
const tableShowListForm = ref({
    // 获取表格数据参数
    consumeCode: consumeCode.value,
    payBatchCode: "",
    state: "1",
    pageSize: 999,
    pageIndex: 1,
});
const loadingTable = ref(false)//房台加载loading
const getTableList = (flag) => {
    if (flag) {
        tableShowListForm.value.pageIndex = 1;
    }
    loadingTable.value = true
    console.log(tableShowListForm.value);
    Api.Common.PcObjProcess.Do({
        functionName: "GetPayBatchGoodsList",
        contentData: tableShowListForm.value,
    }).then((res) => {
        console.log(res,'TEST');
        tableShowList.value = res.result[0].consumeList;
        res.result[0].payList.map(e => {
            if (e.payType == '012') {
                navBtnList.value.forEach(item => {
                    if (item.title === "退菜") {
                        item.canNotUse = true;
                    }
                    if (item.title === "换菜") {
                        item.canNotUse = true;
                    }
                });
            }
            if (e.payType == '011') {
                navBtnList.value.forEach(item => {
                    if (item.title === "换菜") {
                        item.canNotUse = true;
                    }
                });
            }
            if (e.payType == '008') {
                navBtnList.value.forEach(item => {
                    if (item.title === "退菜") {
                        item.canNotUse = true;
                    }
                    if (item.title === "换菜") {
                        item.canNotUse = true;
                    }
                });
            }
        })
        tableShowListCount.value = tableShowList.value.reduce((total, item) => total + Number(item.orderQty), 0);
        totalPages.value = Math.ceil(res.result[0].totalCount / tableShowListForm.value.pageSize); // 计算总页数
        console.log(totalPages.value,'页码')
        loadingTable.value = false
        
    });
};

// 获取赠送记录
const getGifrecords = (flag) => {
    if (flag) {
        tableShowListForm.value.pageIndex = 1;
    }
    Api.Common.PcObjProcess.Do({
        functionName: "GetGiftRecordList",
        contentData: tableShowListForm.value,
    }).then((res) => {
        console.log(res.result,'res.result');
        tableShowList.value = res.result;
    });
};
const returnPrice = ref(0)
// 获取退换菜记录
const getChangeFood = (flag) => {
    if (flag) {
        tableShowListForm.value.pageIndex = 1;
    }
    Api.Common.PcObjProcess.Do({
        functionName: "GetReturnChangeGoodsRecord",
        contentData: tableShowListForm.value,
    }).then((res) => {
        console.log(res);
        tableShowList.value = res.data;
        returnPrice.value = tableShowList.value.reduce((total, item) => total + Number(item.realAmt), 0);
        tableShowListCount.value = tableShowList.value.reduce((total, item) => total + Number(item.orderQty), 0);
    });
};

// 关闭
const onClose = () => {
    console.log(route.query);
    if(route.query && route.query.path == 'onorder'){
        router.replace({ path: '/onorder' })  
    }else{
        router.replace({ path: '/order' })  
    }
    ls.remove('TABLE_BTN')
}
// ------------------------------------------------ 初始化 --------------------------------------------------------

const onInit = async () => {
    getWaiterList(); // 获取服务员列表
    getCustomerManageList(); // 获取订台人列表
    getFrom(); // 获取来源
    getSpeAsk(); // 获取特殊要求
    getCancleList(); // 获取取消原因
    getTableInfo(); // 获取结账主页左侧栏和头部信息
    //后端等待2秒查数据保证实收金额显示不出问题
    setTimeout(()=>{
    getTableInfo();
    },2000)
    getTableList(true); // 获取买单批次列表（中间表格）
    goodsStore.UpdateAll() // 获取商品信息
};
onInit();

// ------------------------------------------券核销----------------------------------------
// 打开券核销弹窗
let UseTicketDialogVisible = ref(false)
const UseTicketDialogRef = ref()
const handleUseTicket = () => {
    UseTicketDialogVisible.value = true
    //   nextTick(() => {
    //     UseTicketDialogRef.value.open(table)
    //   });
}
// 点击弹窗里的取消按钮
const emitUseTicketDialogCancel = (params) => {
    UseTicketDialogVisible.value = false
}
// 点击弹窗里的确定按钮
const emitUseTicketDialogSubmit = (params) => {
    UseTicketDialogVisible.value = false
    onInit()
}

const treeData = ref([])
// 绑定的选择值
const selectedValue = ref(''); 
const selectedValueText = ref(''); 
//获取订台人配置
const getGetOrgGroup = ()=> {
  Api.Common.PcObjProcess.Do({ "functionName": "GetOrgGroup", "contentData":"" })
    .then(res => {
       console.log(res,'列表数据')
         if(res.result.length > 0) {
          treeData.value = res.result
          treeData.value.unshift({label: "无",value:"-1",children:[]})
          
         }
     })
}
getGetOrgGroup()
// selectedValue.value
const handleSelectionChange = (value) => {
    selectedValue.value = value
    updateConsumeMarketUserForm.value.marketUser = value

    console.log(selectedValue.value,'dasdad')
    // selectedValueText.value = value
 // 遍历 treeData 查找匹配的节点
 for (let group of treeData.value) {
    // 遍历该组的子节点（children）
    for (let child of group.children) {
      // 判断子节点的 value 是否与选中的值匹配
      if (child.value === value) {
        // 拼接上一级的 label（父节点）和当前子节点的 label
        const result = `${group.label} - ${child.label}`;
        // 将拼接结果存储到 formData.selectedName 中（或者其他需要显示的地方）
        selectedValueText.value = result;
        return; // 找到匹配项后结束函数
      }
    }
  }
}; 

// 出品补打
const PrintOrder = (v,type,code)=> {
     console.log(v,'每一项--------------')
     let parmas  = null
     if(type == 'taocan') {
        parmas = {
             "roomCode":code.roomCode,
             "consumeCode":consumeCode.value,
             "itemCode":v.itemCode,
               }     
     } else {
        parmas = {
             "roomCode":v.roomCode,
             "consumeCode":consumeCode.value,
             "itemCode":v.itemCode,
                }
     }

     Api.Common.PcObjProcess.Do({ functionName: "PrintOrderReceiptOne",  contentData: parmas}).then((res) => {
        ElNotification({title: '提示',message: "打印成功", type: 'success'});
    });
}


// ------------------------------------------联台----------------------------------------
const tispShow = ref(false)
const LiantaiTableSelectShow = ref(false)
const LiantaiRoomList = ref([])
const subRoomList = ref([])
const liaNtaistatus = ref(true)
let isMain=false;
let mainCode="";


//获取联台状态
const getliaNtaistatus = ()=> {
    let params =  {
		"consumeCode": ls.get('TABLE_INFO').consumeCode,//主桌台单号
		"roomCode": ls.get('TABLE_INFO').roomCode ,//主桌桌台号
	}
    Api.Common.PcObjProcess.Do({ "functionName": "UnionRoomInfo", "orgCode": "0004", "contentData": params })
    .then(res => {
        console.log(res.items,'items')
        if(res.items.length > 0) {
            if(ls.get('TABLE_INFO').roomCode  == res.items[0].mainRoomCode) {
                isMain = true;
                mainCode= res.items[0].mainRoomCode
            } else {
                mainCode= res.items[0].mainRoomCode
            }
        }
        console.log(subRoomList.value,'subRoomList.value')
        if(res.status == 0) {
            liaNtaistatus.value = false
        } else {
            liaNtaistatus.value = true
        }
        console.log(res,'获取联台状态');
    })
} 


//选择桌台
const selectTable = (data) => {
    console.log(data,'data')
    if (data.length > 0 ) {
      LiantaiRoomList.value = data.filter(item => item.code !== undefined);
      console.log(LiantaiRoomList.value ,'LiantaiRoominfo') 
      LiantaiTableSelectShow.value = false
      tispShow.value = true
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }
}

// 确认操作
const LiantailSubmit = (tabelCodeArray) => {
    console.log('确认操作',tabelCodeArray)
   let params =  {
		"consumeCode": ls.get('TABLE_INFO').consumeCode,//主桌台单号
		"mainRoomCode": ls.get('TABLE_INFO').roomCode ,//主桌桌台号
		"subRoomCodes": tabelCodeArray// 副桌桌台号
	}
  Api.Common.PcObjProcess.Do({ "functionName": "UnionRoom", "orgCode": "0004", "contentData": params })
    .then(res => {
        console.log(res,'联台操作');
        ElNotification({
            title: '提示',
            message: res.result,
            type: 'success',
        })
        tispShow.value = false
        getliaNtaistatus()
    })
}

//取消联台
const canceltaiChange = ()=> {
    let params = null
    if(isMain){
        params =  {
		"consumeCode": ls.get('TABLE_INFO').consumeCode,//主桌台单号
		"mainRoomCode": mainCode ,//主桌桌台号
        }
	}else{
        params =  {
		"consumeCode": ls.get('TABLE_INFO').consumeCode,//主桌台单号
		"mainRoomCode": mainCode ,//主桌桌台号
        "subRoomCode": ls.get('TABLE_INFO').roomCode ,//主桌桌台号
        }
    }
  Api.Common.PcObjProcess.Do({ "functionName": "CancelUnionRoom", "orgCode": "0004", "contentData": params })
    .then(res => {
        ElNotification({
            title: '提示',
            message: res.result,
            type: 'success',
        })
        tispShow.value = false
        getliaNtaistatus()
    })
}

getliaNtaistatus()


// -------------------------------------------------------------------全屏-----------------------------------------------------------
const isFullscreen = ref(true); // 控制全屏状态
const isFullscreenChange = ()=> {
        if(isFullscreen.value) {
            isFullscreen.value = false
            tableShowListForm.value.pageSize = 999
            getTableList();
        } else {
            isFullscreen.value = true
            tableShowListForm.value.pageSize = 4
            getTableList();
        }
}


</script>

<style scoped lang="scss">
::v-deep{
    .el-table--fit{
        height: 300px;
    }
    .unpay{
        .el-table--fit{
            height: 470px;
        }
    }
    .main-right-table-height{
        .el-table--fit{
            height: 700px;
        }
    }
   
}

::v-deep{
    .markUser{
        .cell{
            padding: 0;
        }
    }
    .el-tooltip__trigger{
        // width: 120px;
        // height: 20px;
        margin: 0 10px;
        padding: 0;
        text-align: center;
        .el-select__suffix{
            margin-right: 6px;
        }
    }
    
}
::v-deep .el-loading-mask {
   background: rgba(0, 0, 0, 0.2) !important;
   .circular {
    width: 80px;
    height: 80px;
   }
}


.table-markUser{
    // height: 70px;
    overflow: visible;
    .table-markUser-title{
      
        font-size: 14px;
        color: #212121;
        cursor: pointer;
        line-height: 14px;
        overflow: visible; 
        // max-width: 100%;
        // height: 50px;
        // overflow: hidden;
        // word-wrap: break-word; /* 自动换行 */
        // white-space: wrap; /* 保留空格并换行 */
    }
    .table-markUser-select{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .table-markUser-desc{
        font-size: 16px;
        color: #212121;
        cursor: pointer;
        line-height: 16px;
        overflow: visible; 
    }
    .table-markUser-btn{
        overflow: visible; 
        width: 36px;
        height: 16px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 12px;
        color: #FF6A00;
        line-height: 16px;
        margin: 0px auto 0;
        cursor: pointer;
    }
}

.orderTable-container {
    padding: 20px 100px 0px;
    background: #f2f2f2;
    position: relative;
    min-height: 1000px;
    // height: 100%;

    // min-width: 1200px !important;
    // box-sizing: border-box;
    .orderTable-container-top {
        display: flex;
        justify-content: space-between;

        .top-left {
            width: 1540px;
            height: 60px;
            background: #ffffff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 6px 0 39px;

            .top-com {
                font-family: Microsoft YaHei;
                // font-weight: bold;
                font-size: 20px;
                color: #666666;
                line-height: 24px;
            }

            .top-spe {
                width: 140px;
                height: 48px;
                background: #fafafa;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #ff6a00;
                text-align: center;
                line-height: 48px;
                cursor: pointer;
            }
        }

        .top-right {
            position: relative;
            right: -40px;
            width: 120px;
            height: 60px;
            background: #cccccc;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }
    }

    .orderTable-container-main {
        padding: 20px 0 20px 0;
        display: flex;

        .main-left {
            position: relative;
            width: 320px;
            height: 810px;
            overflow-y: auto;

            .main-left-item {
                // width: 320px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #e6e6e6;
                padding: 20px 0 0 21px;
                margin-bottom: 20px;
                position: relative;
                cursor: pointer;

                .state-icon {
                    position: absolute;
                    width: 48px;
                    height: 24px;
                    right: 15px;
                    top: 17px;
                    background: #ff3333;
                    border-radius: 4px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 24px;
                    text-align: center;
                }

                &.spe {
                    background: #fff4bf;
                    border: 1px solid #ffd400;
                }

                .item-li {
                    display: flex;
                    align-items: center;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                    padding-bottom: 20px;

                    .li-value {
                        &.spe {
                            font-size: 20px;
                        }
                    }
                }
            }

            .main-left-spe {
                padding: 13px 20px 0;
                // width: 320px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #e6e6e6;
                margin-bottom: 20px;
                cursor: pointer;

                &.spe {
                    background: #fff4bf;
                    border: 1px solid #ffd400;
                }

                .spe-top {
                    border-bottom: 1px solid #e6e6e6;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 12px;

                    .spe-top-left {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #212121;
                        line-height: 14px;
                    }

                    .spe-top-right {
                        width: 26px;
                        height: 26px;
                        background: #ffd400;
                        border-radius: 50%;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 20px;
                        color: #ffffff;
                        line-height: 20px;
                        font-style: italic;
                        text-align: center;
                    }
                }

                .spe-main {
                    padding-top: 20px;
                    position: relative;

                    .spe-main-state {
                        position: absolute;
                        right: 0;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 16px;
                    }

                    .spe-main-li {
                        padding-bottom: 20px;
                        display: flex;

                        .li-title {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                            line-height: 16px;
                        }

                        .li-value {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                            line-height: 16px;
                        }

                        .li-left {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #212121;
                            font-size: 16px;
                            line-height: 16px;
                            display: flex;
                            align-items: center;

                            .li-title {
                                color: #212121;
                            }

                            .li-value {
                                font-size: 18px;
                                color: #0acc6b;
                                font-weight: Bold;
                            }
                        }

                        .li-right {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #ff3333;
                            line-height: 16px;
                        }
                    }

                    .spe {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            
            }
            .fullscreen {
                position: absolute;
                bottom: 3px;
                right: 3px;
                width: 60px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: red;
                color: #fff;
                border-radius:6px ;
                font-size: 16px;
            }
        }

        .main-left::-webkit-scrollbar {
            display: none;
            // width: 0;
        }

        .main-right {
            height: 720px;
            left: 40px;
            position: relative;
            // width: 1380px;
            // padding: 20px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            background: #F9F9F9;
            border-radius: 8px;
            // flex: 1;
            .main-right-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 20px;

                .top-left {
                    display: flex;
                    align-items: center;

                    .top-left-btn {
                        width: 240px;
                        height: 60px;
                        background: #ffffff;
                        border-radius: 8px;
                        border: 1px solid #e6e6e6;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 60px;
                        text-align: center;
                        margin-right: 20px;
                        cursor: pointer;

                        &.active {
                            background: #fff4bf;
                            border: 1px solid #ffd400;
                        }
                    }

                    .top-left-forAll {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #ff6a00;
                        line-height: 16px;
                        position: relative;
                        cursor: pointer;
                        padding-right: 8px;
                    }

                    i {
                        width: 15px;
                        height: 16px;
                        background-image: url("https://oss.jtmckj.com/pc/images/common/i_icon_right.png");
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100%;
                        cursor: pointer;
                    }
                }

                .top-right {
                    display: flex;
                    .top-right-btn {
                        margin-right: 15px;
                        width: 160px;
                        height: 60px;
                        background: #ffffff;
                        border-radius: 8px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 60px;
                        text-align: center;
                        cursor: pointer;
                        margin-left: 20px;

                        &.active {
                            background: #fff4bf;
                            border: 1px solid #ffd300;
                        }
                    }
                }
            }

            .main-right-nav {
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                position: relative;

                .nav-btn {
                    width: 110px;
                    height: 48px;
                    background: #ffe566;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    margin-right: 20px;
                    cursor: pointer;

                    &.active {
                        background: #e6e6e6;
                        color: #cccccc;
                    }
                }
                .jt-btn-flex {
                    display: flex;
                    position: absolute;
                    right: 2px;
                    .jt-mr20 {
                        margin-right:20px ;
                    }
                }
                .jt-btn-flex-1 {
                    right: 320px;
                }
                .forceUnLock {
                    width: 130px;
                    height: 48px;
                    background: #ffe566;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    // margin-right: 20px;
                    cursor: pointer;
                }
            }

            .main-right-table {
                width: 1380px;
                // height: 300px;
                overflow-y: auto;
                margin-bottom: 10px;
                &.spe{
                    width: 1510px;
                }
                .table-cell {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    white-space: wrap;
                    // padding-left: 40px;
                    .table-spe {
                        width: 40px;
                        height: 20px;
                        background-image: url("https://oss.jtmckj.com/pc/images/common/i_table_icon.png");
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100%;
                        cursor: pointer;
                    }
                }

                .table-sub {
                    text-align: left;
                    box-sizing: border-box;
                    padding-left: 60px;
                    display: flex;
                    align-items: center;
                    margin: 6px 0;

                    .subDot {
                        width: 6px;
                        height: 6px;
                        background-color: #FF6A00;
                        border-radius: 50%;
                        margin-right: 10px;
                    }

                    .subName {
                        color: #666666;
                        font-size: 12px;
                    }
                }

                ::v-deep(.el-table--fit) {
                    border-radius: 8px;
                    border: 1px solid #ffd400;
                }

                ::v-deep(.tableHeaderRowClassName th) {
                    background-color: #ffd400;
                    height: 60px;
                    background: #fff4bf;
                }

                ::v-deep(.el-table .cell) {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #212121;
                    line-height: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                ::v-deep(.cell) {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #212121;
                    line-height: 14px;
                    padding: 10px 0;
                    // height: 45px;
                }

                ::v-deep(.el-table td.el-table__cell) {
                    border-bottom: 1px solid #cccccc;
                }
            }
            .main-right-table-height {
                height: 750px;
            }
             
            .main-right-table::-webkit-scrollbar { 
            width: 12px;
            height: 4px;
            }
    
            .main-right-table::-webkit-scrollbar-track {
            background: #f1f1f1;
            }

            .main-right-table::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
            }
            .main-right-footer {
                width: 1380px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                // justify-content: end;
               
                padding-left: 20px;

                .footer-left {
                    display: flex;
                    align-items: center;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 18px;

                    .span-title {
                        color: #212121;
                    }

                    .span-value {
                        color: #ff3333;
                        font-weight: bold;
                    }
                }

                .footer-right {
                    display: flex;
                    align-items: center;

                    .footer-right-btn {
                        width: 100px;
                        height: 48px;
                        background: #ffffff;
                        border-radius: 8px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #00aaff;
                        line-height: 48px;
                        text-align: center;
                        cursor: pointer;
                        margin-left: 20px;
                    }
                }
            }

            .main-right-pay {
                width: 1380px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 20px;

                .pay-left {
                    width: 680px;
                    height: 220px;
                    background: #ffffff;
                    border-radius: 8px;
                    padding: 20px 0 6px 0;

                    .pay-left-top {
                        display: flex;
                        align-items: center;
                        padding-bottom: 19px;
                        padding-left: 20px;

                        .left-top-item {
                            width: 30%;
                            height: 20px;
                            display: flex;

                            div {
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #212121;
                                line-height: 16px;
                            }
                        }
                    }

                    .pay-left-main {
                        display: flex;

                        // align-items: center;
                        .main-all {
                            width: 30%;
                            display: flex;
                            flex-direction: column;
                            // align-items: center;
                            justify-content: center;

                            .all-title {
                                width: 140px;
                                text-align: right;
                                white-space: nowrap;
                            }
                        }

                        .main-other {
                            width: 25%;

                            .other-title {
                                width: 100px;
                                text-align: right;
                                white-space: nowrap;
                            }
                        }

                        .main-get {
                            width: 30%;

                            .get-title {
                                width: 90px;
                                text-align: right;
                                white-space: nowrap;
                            }
                        }

                        .main-change {
                            width: 15%;
                        }

                        .li-item {
                            display: flex;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #999999;
                            line-height: 14px;
                            padding-bottom: 11px;
                            white-space: nowrap;

                            &.spe {
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #212121;
                                line-height: 16px;
                            }
                        }
                    }
                    .pay-left-footer{
                        padding-left: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #212121;
                        line-height: 16px;
                    }
                }

                .pay-right {
                    width: 680px;
                    height: 220px;
                    background: #ffffff;
                    border-radius: 8px;
                    padding: 20px 0 0 0px;
                    overflow: auto;

                    .pay-right-top {
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 16px;
                        color: #212121;
                        line-height: 16px;
                        padding-bottom: 20px;
                        padding-left: 20px;
                    }

                    .pay-right-item {
                        padding-bottom: 4px;

                        .item-title {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                            line-height: 16px;
                            padding-bottom: 11px;

                            .item-title-one {
                                width: 50%;
                                text-align: center;
                            }

                            .item-title-two {
                                width: 11%;
                                text-align: center;
                            }

                            .item-title-three {
                                width: 11%;
                                text-align: center;
                            }

                            .item-title-four {
                                width: 30%;
                                text-align: center;
                            }
                        }

                        .item-value {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #999999;
                            line-height: 14px;
                            padding-bottom: 11px;

                            .item-value-one {
                                width: 50%;
                                text-align: center;
                            }

                            .item-value-two {
                                width: 11%;
                                text-align: center;
                                color: #0ACC6B;
                                
                            }
                            .col{   
                                width: 11%;
                                text-align: center;
                                color: #ff3333;
                                }

                            .item-value-three {
                                width: 11%;
                                text-align: center;
                            }

                            .item-value-four {
                                width: 30%;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
        .main-right-height {
            height: 900px;
        }
    }

    .orderTable-container-bottom {
        position: absolute;
        bottom: -130px;
        left: -3px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1420px;
        // margin-left: 340px;
        padding-bottom: 42px;
        padding-top: 20px;

        .bottom-btn {
            width: 180px;
            height: 60px;
            background: #ffd400;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #212121;
            line-height: 60px;
            text-align: center;
            cursor: pointer;

            &.spe {
                background: #ff6a00;
                color: #ffffff;
            }

            &.active {
                background: #e6e6e6;
                color: #cccccc;
            }
        }
    }

    .orderTable-container-footer {
        position: absolute;
        bottom: 10px;
        transform: translateX(-33px);
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 95px;
    }
}

.popup {
    white-space: nowrap;
    background: #ffffff;
    border-radius: 16px;

    .popup-title {
        padding: 40px 60px 0px;

        .popup-title-item {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 20px;
            padding-bottom: 30px;
            border-bottom: 1px solid #e5e5e5;
        }
    }

    .popup-main {
        padding: 20px 60px;

        .form {
            .form-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;

                .input-span {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                }
            }

            .form-speItem {
                margin-bottom: 20px;

                ::v-deep(.el-radio__inner) {
                    border-radius: 2px;
                }

                ::v-deep(.el-radio__input.is-checked) .el-radio__inner::after {
                    content: "✔";
                    width: 8px;
                    height: 3px;
                    border: 1px solid white;
                    border-top: transparent;
                    border-right: transparent;
                    text-align: center;
                    display: block;
                    position: absolute;
                    top: 2px;
                    left: 6px;
                    // transform: rotate(-45deg);
                    color: #ff6a00;
                    // font-size: 16px;
                    border-radius: 0px;
                    background-color: #ffffff;
                }
            }

            .form-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .form-footer-btn {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .btn-cancle {
                        text-align: center;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 24px;
                        color: #ff6a00;
                        line-height: 60px;
                        width: 160px;
                        height: 60px;
                        background: #ffffff;
                        border-radius: 8px;
                        border: 1px solid #ff6a00;
                        margin-right: 36px;
                        cursor: pointer;
                    }

                    .btn-submit {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 24px;
                        color: #ffffff;
                        line-height: 60px;
                        text-align: center;
                        width: 160px;
                        height: 60px;
                        background: #ff6a00;
                        border-radius: 8px;
                        cursor: pointer;
                    }
                }
            }
        }

        .popup-btn {
            display: flex;
            align-items: center;
            justify-content: center;

            .btn-cancle {
                text-align: center;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #ff6a00;
                line-height: 60px;
                width: 160px;
                height: 60px;
                background: #ffffff;
                border-radius: 8px;
                border: 1px solid #ff6a00;
                margin-right: 36px;
                cursor: pointer;
            }

            .btn-submit {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #ffffff;
                line-height: 60px;
                text-align: center;
                width: 160px;
                height: 60px;
                background: #ff6a00;
                border-radius: 8px;
                cursor: pointer;
            }
        }

        ::v-deep(.el-form-item) {
            align-items: center;
        }

        ::v-deep(.el-input__wrapper) {
            width: 320px;
            height: 48px;
            // background: #f9f9f9;
            // border-radius: 8px;
            box-shadow: none;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
        }

        ::v-deep(.el-form-item__label) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
            line-height: 16px;
            // padding: 0 10px 0 0;
            height: auto;
            width: 70px;
            text-align: right;
        }

        ::v-deep(.el-select__wrapper) {
            width: 320px;
            height: 48px;
            // background: #f9f9f9;
            // border-radius: 8px;
            box-shadow: none;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
        }
        ::v-deep(.el-select__wrapper.is-disabled){
            background: #f9f9f9;
            border-radius: 8px;
        }

        ::v-deep(.el-form-item__content) {
            width: 320px;
            border-radius: 8px;
        }

        ::v-deep(.asterisk-left) {
            display: flex;
            align-items: center;
            margin: 0;
        }

        ::v-deep(.el-date-editor.el-input) {
            width: 320px;
            height: 48px;
        }

        ::v-deep(.el-radio__label) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            line-height: 16px;
        }
    }

    :deep input::-webkit-inner-spin-button,
    :deep input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }

    ::v-deep(.el-select__icon) {
        width: 18px;
        height: 11px;
        color: #212121;
        font-weight: 700;
    }

    ::v-deep(.el-input__inner) {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
    }

    ::v-deep(.el-radio__inner) {
        // margin-left: 20px;
        width: 20px;
        height: 20px;
    }

    ::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
    }

    ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
    }

    ::v-deep(.el-select__prefix) {
        display: none;
    }
}

.subClose {
    display: flex;
    justify-content: flex-end;

    div {
        width: 100px;
        background-color: #ffd400;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        color: #212121;
        cursor: pointer;
    }
}
.confirmPopue{
  .confirmPopue-title{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
  }
  .mark-title{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 30px;
    padding-top: 20px;
    padding-left: 30px;
  }
  .mark-choose{
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding-bottom: 50px;
    padding-left: 30px;
    display: flex;
    align-items: center;
    .tree-select{
        width: 50%;
    }
  }
  .confirmPopue-center{
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: 500;
    font-size: 20px;
    color: #212121;
    line-height: 20px;
    padding: 40px 0;
    .top-item{
      display: flex;
      align-items: center;
      padding: 0px 60px 20px;
      .top-item-title{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #212121;
        line-height: 16px;
        width: 120px;
      }
      ::v-deep(.el-select__wrapper){
        width: 40%;
      }
    }
    
  }
  .popup-btn{
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-cancle{
              text-align: center;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FF6A00;
              line-height: 60px;
              width: 160px;
              height: 60px;
              background: #FFFFFF;
              border-radius: 8px;
              border: 1px solid #FF6A00;
              margin-right: 36px;
              cursor: pointer;
        }
        .btn-submit{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
              width: 160px;
              height: 60px;
              background: #FF6A00;
              border-radius: 8px;
              cursor: pointer;
            }
  }
  .popup-last{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .popup-last-btn{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FF6A00;
        line-height: 60px;
        cursor: pointer;
    }
  }
}
.chy-downcontinar {
    // display: flex;
    // justify-content: center;
    // width: 90px;
    div:nth-child(1) {
        margin-right: 4px;
    }
    div:nth-child(2) {
        color: #43b2ff;
        cursor: pointer;
    }
}
.print-taocan {
    color: #43b2ff;cursor: pointer;
    margin-bottom: 5px;
    margin-top: 5px;
}
</style>
